<template>
  <div class="box">
    <!-- 顶部 -->
    <header>
      <van-nav-bar title="我的嗨购">
        <template #left>
          <van-icon
            name="arrow-left"
            size="25"
            color="black"
            @click="onClickLeft"
          />
        </template>

        <template #right>
          <van-popover
            v-model="showPopover"
            trigger="click"
            :actions="actions"
            @select="onSelect"
            placement="bottom-end"
          >
            <template #reference>
              <van-icon
                name="ellipsis"
                size="25"
                color="black"
                @click="onClickRight"
              />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </header>
    <van-divider :style="{ margin: 0 }" />
    <!-- 主体部分 -->
    <div class="main">
      <!-- 我的 -->
      <div class="myhead">
        <div class="myhead-left">
          <img
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            alt=""
          />
          <div class="uinfor">
            <span>雾许</span>
            <span>1519***1234</span>
          </div>
        </div>
        <div class="myhead-right">
          <van-icon name="setting-o" size="24px" @click="getSeting"/>
        </div>
      </div>
      <div class="itemInfor">
        <div class="order">
          <div class="item">
            <div class="item-left">
              <van-icon name="todo-list-o" size="20px"/>
              <span>全部定单</span>
            </div>
            <van-icon name="arrow" size="20px"/>
          </div>
        </div>
        <div class="goods">
          <div class="item">
            <div class="item-left">
              <van-icon name="balance-pay" size="20px"/>
              <span>待付款</span>
            </div>
            <van-icon name="arrow" size="20px"/>
          </div>
          <div class="item">
            <div class="item-left">
              <van-icon name="logistics" size="20px"/>
              <span>待收货</span>
            </div>
            <van-icon name="arrow" size="20px"/>
          </div>
        </div>
        <div class="others">
          <div class="item">
            <div class="item-left">
              <van-icon name="pending-payment" size="20px"/>
              <span>优惠券</span>
            </div>
            <van-icon name="arrow" size="20px"/>
          </div>
          <div class="item">
            <div class="item-left">
              <van-icon name="hot-o" size="20px"/>
              <span>商品收藏</span>
            </div>
            <van-icon name="arrow" size="20px"/>
          </div>
          <div class="item">
            <div class="item-left">
              <van-icon name="good-job-o" size="20px"/>
              <span>收藏店铺</span>
            </div>
            <van-icon name="arrow" size="20px"/>
          </div>
          <div class="item">
            <div class="item-left">
              <van-icon name="cash-back-record" size="20px" />
              <span>退款售后</span>
            </div>
            <van-icon name="arrow" size="20px"/>
          </div>
        </div>
      </div>
      <!-- 显示分享面板 -->
      <div class="share">
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelectShare"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  Card,
  Tag,
  SwipeCell,
  Button,
  Checkbox,
  CheckboxGroup,
  Divider,
  Empty,
  Toast,
} from "vant";

Vue.use(Card);
Vue.use(Tag);
Vue.use(SwipeCell);
Vue.use(Button);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Divider);
Vue.use(Empty);
Vue.use(Toast);

export default {
  name: "Cart",
  components: {},
  created() {},
  data() {
    return {
      showPopover: false,
      showShare: false,
      emptyList: true,
      actions: [
        { text: "首页", icon: "wap-home", index: 0 },
        { text: "分享", icon: "share", index: 1 },
      ],
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      selectNum: 1,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
      console.log(111);
    },
    onClickRight() {
      console.log("按钮");
    },
    onSelect(action) {
      console.log(action.index);
      switch (action.index) {
        case 0:
          this.$router.back("/views/home");
          break;
        case 1:
          this.showShare = true;
          break;
        default:
          break;
      }
    },
    onSelectShare(option) {
      console.log(option.name);
      this.showShare = false;
    },
    getSeting(){
      this.$router.push("/views/Error");
    }
  },
};
</script>
<style scoped>
.myhead {
  display: flex;
  justify-content: space-between;
  background: #fff;
  height: 1.5rem;
  padding: 0.15rem;
  box-sizing: border-box;
}
.myhead-left {
  display: flex;
  align-items: center;
}
.myhead-left > img {
  width: 0.8rem;
}
.uinfor {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.order,
.goods,
.others {
  background-color: #fff;
}
.uinfor > span {
  margin-bottom: 0.1rem;
  margin-left: 0.1rem;
}
.item {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem;
  box-sizing: border-box;
  height: 0.4rem;
  margin: 0.1rem;
}
.item-left {
  display: flex;
  align-items: center;
}
.item-left > span {
  margin-left: 0.1rem;
}
</style>
